<template>
    <div class="add">
        <el-tabs type="border-card">
            <el-tab-pane :label="title" v-if="this.type == 'ADD'">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                    width="100%">
                    <div class="nbbd">
                        <el-form-item label="小区名称" prop="communityname">
                            <el-input v-model="ruleForm.communityname" width="400px"></el-input>
                        </el-form-item>
                        <el-form-item label="单元名称" prop="unitname">
                            <el-input v-model="ruleForm.unitname" width="400px"></el-input>
                        </el-form-item>
                    </div>
                    <div class="nbbd">
                        <el-form-item label="栋数" prop="unitnum">
                            <el-input v-model="ruleForm.unitnum" width="400px"></el-input>
                        </el-form-item>
                        <el-form-item label="状态选择" prop="unitstatus">
                            <el-select v-model="ruleForm.unitstatus" placeholder="请选择状态" width="100%">
                                <el-option label="已建成" value="1"></el-option>
                                <el-option label="未建成" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="单元详情" v-if="this.type == 'DETAIL'">
                <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
                    <el-form-item label="小区名称">
                        <span>{{ ruleForm.communityname }}</span>
                    </el-form-item>
                    <el-form-item label="单元名称">
                        <span>{{ ruleForm.unitname }}</span>
                    </el-form-item>
                    <el-form-item label="栋数">
                        <span>{{ ruleForm.unitnum }}</span>
                    </el-form-item>
                    <el-form-item label="状态">
                        <span v-if="ruleForm.unitstatus == 1">已建成</span>
                        <span v-if="ruleForm.unitstatus == 2">未建成</span>
                    </el-form-item>
                    <el-form-item label="咨询问候">
                        <span v-html="ruleForm.unitcontext"></span>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <editor v-model="ruleForm.unitcontext" :init="editorInit" v-if="this.type == 'ADD'"></editor>
        <div class="lgczan">
            <el-button icon="el-icon-back" @click="handleFh" size="mini" type="primary" class="czan">返回</el-button>
            <br>
            <el-button icon="el-icon-edit" @click="deleteBc" size="mini" type="primary" class="czan" v-if="this.type == 'ADD'">保存</el-button>
            <el-button icon="el-icon-edit" @click="deleteBj" size="mini" type="primary" class="czan" v-if="this.type == 'DETAIL'">编辑</el-button>
        </div>
    </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
export default {
    data() {
        return {
            title: '新增单元',
            type:this.$route.query.type,
            id:this.$route.query.detailId,
            ruleForm: {
                communityname: '',
                unitnum: '',
                unitname: '',
                unitstatus: '',
                unitcontext: '',
            },
            dyForm:{
                communityname:'',
                unitname:'',
                unitnum:'',
                unitstatus:'',
                unitcontext:'',
            },
            value: '',
            rules: {
                communityname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                unitnum: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                unitname: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                unitstatus: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            },
            editorInit: {
                language: 'zh_CN',
                height: '400px',
                convert_urls: false,
                plugins: [
                    'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
                ],
                toolbar: [
                    'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
                    'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
                ],
                images_upload_handler: function (blobInfo, success, failure) {
                    const formData = new FormData()
                    formData.append('file', blobInfo.blob())
                    createStorage(formData)
                        .then(res => {
                            success(res.data.data.url)
                        })
                        .catch(() => {
                            failure('上传失败，请重新上传')
                        })
                }
            }
        };
    },
    components: {
        Editor
    },
    created(){
        this.getDataList()
    },
    methods: {
        // 获取数据列表
        async getDataList() {
            let res = await this.$axiosToken({
                url: '/house/getDetailId',
                method: 'get',
                data: { id:this.id },
                success: (nb) => {
                    this.ruleForm = nb[0]
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 返回
        handleFh() {
            this.$router.go(-1)
        },
        // 编辑
        deleteBj(){
            this.type = 'ADD'
            this.title = '编辑单元'
        },
        // 保存
        deleteBc() {
            if (this.ruleForm.communityname == '' || this.ruleForm.unitnum == '' || this.ruleForm.unitname == '' || this.ruleForm.unitstatus == '') {
                this.$message({
                    type: 'error',
                    message: '录入信息不能为空!'
                });
            } else {
                this.$confirm('确认提交信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$axiosToken({
                        url: '/house/addunitList',
                        method: 'post',
                        data: {
                            communityname: this.ruleForm.communityname,
                            unitnum: this.ruleForm.unitnum,
                            unitname: this.ruleForm.unitname,
                            unitstatus: this.ruleForm.unitstatus,
                            unitcontext: this.ruleForm.unitcontext,
                        },
                        success: (result) => {
                            this.$router.push({
                                path: '/house/unit',
                            })
                        }
                    })
                })
            }
        }
    }
}
</script>
<style scoped>
.nbbd {
    display: flex;
}

::v-deep .el-form>div {
    width: 40%;
}

::v-deep .el-input__inner {
    width: 600px;
}

.lgczan {
    position: absolute;
    top: 40%;
    right: 10px;
    z-index: 5;
}

.lgczan button {
    margin-bottom: 10px;
}
</style>